<template>
  <div class="performance-highlights">
    <div class="performance-title">Performance Highlights</div>
    <div class="highlights-content">
      <!-- 亮点部分 -->
      <div class="highlight-card highlight-theme">
        <div class="card-icon">
          <i class="el-icon-chat-dot-square"></i>
        </div>
        <div class="card-details">
          <div class="card-title">Delicious vegan options</div>
          <div class="card-description">
            Excellent location, modern design, and friendly staff.<br />
            The hotel is conveniently located next to the metro, with easy
            access to the city center and Danube. Guests praise the clean,
            stylish rooms, great breakfast, and lively rooftop bar. Staff are
            noted for being warm and helpful.
          </div>
        </div>
      </div>

      <!-- 问题部分 -->
      <div class="highlight-card issue-theme">
        <div class="card-icon">
          <i class="el-icon-chat-dot-square"></i>
        </div>
        <div class="card-details">
          <div class="card-title">Crowded during breakfast peak time</div>
          <div class="card-description">
            Noise and value concerns.<br />
            Some guests report poor sound insulation between rooms and feel that
            certain extras (like pet or parking fees) don't offer corresponding
            value.
          </div>
        </div>
      </div>

      <!-- 建议部分 -->
      <div class="highlight-card suggestion-theme">
        <div class="card-icon">
          <i class="el-icon-chat-dot-square"></i>
        </div>
        <div class="card-details">
          <div class="card-title">60% of all food-related mentions are about breakfast</div>
          <div class="card-description">
            Improve room comfort and communication on fees.<br />
            Enhancing soundproofing and ensuring transparent communication about
            additional charges could significantly boost guest satisfaction.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据可以从API获取，这里使用硬编码示例
      highlightsData: {
        highlight: {
          title: "Delicious vegan options",
          content: "Excellent location, modern design, and friendly staff...",
        },
        issue: {
          title: "Crowded during breakfast peak time",
          content: "Noise and value concerns...",
        },
        suggestion: {
          title: "60% of all food-related mentions are about breakfast",
          content: "Improve room comfort and communication on fees...",
        },
      },
    };
  }
};
</script>

<style lang="scss" scoped>
.performance-highlights {
  margin-top: 20px;
  height: auto;
  min-height: 1.7778rem;
  border-radius: 0.0556rem;
  border: 1px solid #cdcccc;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;

  .performance-title {
    margin: 24px 24px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #454545;
  }

  .highlights-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 24px;

    .highlight-card {
      display: flex;
      align-items: center;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      .card-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
      }

      .card-details {
        padding: 12px 16px;
        flex: 1;

        .card-title {
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 4px;
        }

        .card-description {
          font-size: 13px;
          line-height: 1.5;
          color: #666;
        }
      }
    }

    .highlight-theme {
      .card-icon {
        background-color: rgba(51, 181, 229, 0.1);
        color: #33b5e5;
      }
    }

    .issue-theme {
      .card-icon {
        background-color: rgba(255, 152, 0, 0.1);
        color: #ff9800;
      }
    }

    .suggestion-theme {
      .card-icon {
        background-color: rgba(76, 175, 80, 0.1);
        color: #4caf50;
      }
    }
  }
}
</style>